<template>
	<view class="page" v-cloak>
		<!-- 自定义头部start -->
		<view class="cu-custom">
			<view class="cu-bar fixed" :style="[
            { height: CustomBar + 'px', paddingTop: StatusBar + 'px', backgroundColor: 'rgba(255,255,255,' + opacity + ')', boxShadow: '0 0 10rpx rgba(200,200,200,' + opacity + ')' }
          ]">
				<view class="action" @tap="back"><text class="cuIcon-back"></text></view>
				<!-- #ifndef MP-WEIXIN -->
				<view class="content tabs"
					:style="[{ top: StatusBar + 'px',height: CustomBar-StatusBar  + 'px',lineHeight: CustomBar-StatusBar  + 'px' }]"
					v-if="scrollTop > CustomBar">
					<block v-for="item in tabs" :key="item.title">
						<view class="flex-sub flex justify-center align-center" @tap="changeTab(item)">
							<view class="tab-item" :class="{ active: curTab == item.id }">{{ item.title }}</view>
						</view>
					</block>
				</view>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<view class="content" :style="[{top: StatusBar+'px'}]" v-if="scrollTop > CustomBar">
					{{i18n['商品详情']}}
				</view>
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<view class="share-btn" @tap="openPopup('share')">
					<view style="font-size: 36rpx;">
						<image class="" :src="imgWechatUrl+'/goods/detail_share.png'" />
					</view>
				</view>
				<!-- #endif -->
			</view>
		</view>
		<!-- 自定义头部end -->
		<!-- 自定义头部end -->
		<!-- 轮播图start -->
		<view id="banners" class="banners">
			<swiper class="carousel" :indicator-dots="false" :circular="true" @change="changeSwiper">
				<block v-for="(item, index) in swipers" :key="index">
					<!-- 增加了视频播放，暂时未对接接口 -->
					<!-- <block v-if="index == 0">
						<swiper-item>
							<view class="video-poster">
								<block v-if="!isPlay">
									<image :src="item" mode="aspectFill" lazy-load></image>
									<view class="video-poster-circle" @click="playVideo">
										<view class="video-poster-mask"></view>
										<view class="cuIcon-playfill"></view>
									</view>
								</block>
								<block v-else>
									<video
										src="https://media.w3.org/2010/05/sintel/trailer.mp4"
										id="myVideo"
										style="width:750rpx;height:100%;"
										controls
										@fullscreenchange="fullscreenchange"
										@ended="videoEnd"
									></video>
								</block>
							</view>
						</swiper-item>
					</block>
					<block v-else>
						<swiper-item><image :src="item" mode="aspectFill" lazy-load @click="preview(item, swipers)"></image></swiper-item>
					</block> -->
					<swiper-item>
						<view class="image" @click="preview(item, swipers)">
							<fu-image :src="item" mode="aspectFill"></fu-image>
						</view>
					</swiper-item>
				</block>
			</swiper>
			<view class="pagination">{{ curSwiper }}/{{ swipers.length }}</view>
		</view>
		<!-- 轮播图end -->
		<!-- 悬浮Tab栏 -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="tabs" v-if="scrollTop > CustomBar" :style="{ opacity: opacity,top: CustomBar+'px' }">
			<block v-for="item in tabs" :key="item.title">
				<view class="flex-sub flex justify-center align-center" @tap="changeTab(item)">
					<view class="tab-item" :class="{ active: curTab == item.id }">{{
		        item.title
		      }}</view>
				</view>
			</block>
		</view>
		<!-- #endif -->
		<!-- 价格展示区start -->
		<view class="prices">
			<view class="box">
				<view class="top text-white flex justify-between align-center">
					<text>
						<text>
							<text class="text-price text-xl" v-if="shop_price"></text>
							<!-- <text class="text-xxl">{{ goodsInfo | filterGoodsPrice }}</text> -->
							<text class="text-xxl">{{ shop_price  }}</text>
						</text>
						<text class="margin-left-sm text-xs" v-if="market_price">
							价格
							<text class="text-through ">
								<text class="t text-xs"></text>

								<text class="text-xs">￥{{ market_price }}</text>
							</text>
						</text>
					</text>
					<text class="margin-left-sm sale-box text-sm">
						<text class="text-sm">{{i18n['总销量']}}</text>
						<text class="text-sm">{{ goodsInfo.sales_sum }}</text>
						{{i18n['件']}}
					</text>
				</view>
			</view>
		</view>
		<!-- 价格展示区end -->
		<!-- 商品信息展示区start -->
		<view class="infos padding bg-white">
			<view class="flex justify-between align-start">
				<text class="text-lg text-333 word-break-all  text-bold">
					<!-- <text class="sale-mark" v-if="goodsInfo.goods_label && goodsInfo.goods_label.length > 0" v-for="(item, index) in goodsInfo.goods_label" :key="index">{{ item }}</text> -->
					{{ goodsInfo.name || '' }}
				</text>
				<view class="margin-left flex flex-direction align-center justify-center"
					style="width: 80rpx; min-width: 80rpx" @tap="collect">
					<!-- <text v-if="goodsInfo.is_collect" class="cuIcon-likefill fu-cred" style="font-size: 34rpx"></text>
          <text v-else class="cuIcon-like" style="font-size: 34rpx"></text> -->
					<image v-if="goodsInfo.is_collect" class="collect-icon" :src="imgWechatUrl+'/goods/collect-2.png'" />
					<image v-else class="collect-icon" :src="imgWechatUrl+'/goods/collect-1.png'" />
					<text class="text-sm text-333"
						:class="{ 'fu-cred': goodsInfo.is_collect }">{{ goodsInfo.is_collect ? i18n['收藏'] : i18n['收藏'] }}</text>
				</view>
			</view>
		</view>
		<!-- 商品信息展示区end -->
		<!-- 优惠券展示区start -->
		<view class="bg-white padding-lr">
			<view class="list-item" @tap="switchCoupon" v-if="coupon_list.length > 0">
				<!-- <view class="title">优惠</view> -->
				<view class="content solid-bottom">
					<view class="mes text-df text-333 text-cut">
						<text class="margin-left-xs discounts-info" v-for="(item, index) in coupon_list" :key="index"
							v-if='index < 3'>{{i18n['满']}}{{ item.min_order_money   | filterPrice}}-{{ item.money  | filterPrice}}</text>
					</view>
					<text class="text-333" style="font-size: 24rpx">{{i18n['领券']}}</text>
					<view class="icon coupon-icon"><text class="cuIcon-right text-999 margin-left-xs"
							style="font-size: 24rpx"></text></view>
				</view>
			</view>
		</view>
		<!-- 优惠券展示区end -->
		<!-- 规格,地址,服务,参数start -->
		<view class="margin-top-10 bg-white padding-lr">
			<!-- 规格start -->
			<view class="list-item" @tap="openPopup('specs')" v-if="goodsInfo.is_spec">
				<view class="title">{{i18n['规格']}}</view>
				<view class="content solid-bottom">
					<view class="mes text-df text-333 text-cut text-right">
						<text v-if="sku_name">{{ sku_name }}，</text>
						{{ goodsInfo.number }}{{i18n['件']}}
					</view>
					<view class="icon"><text class="cuIcon-right text-999 margin-left-xs"
							style="font-size: 24rpx"></text></view>
				</view>
			</view>
			<!-- 规格end -->
			<!-- 地址start -->
			<view class="list-item" @tap="switchAddress" v-if="curAddr">
				<view class="title">{{i18n['送至']}}</view>
				<view class="content solid-bottom">
					<view class="mes text-df text-333 text-cut">
						<!-- <text class="cuIcon-locationfill fu-cred"></text> -->
						<image class="address-icon" :src="imgWechatUrl+'/goods/address-copn.png'" />
						<text
							class="margin-left-province">{{ curAddr.province }}{{ curAddr.city }}{{ curAddr.district }}{{ curAddr.address }}</text>
					</view>
					<view class="icon"><text class="cuIcon-right text-999" style="font-size: 24rpx"></text></view>
				</view>
			</view>
			<!-- 地址end -->
			<!-- 优惠start -->
			<view class="list-item" @tap="switchFreight">
				<view class="title">{{i18n['运费']}}</view>
				<view class="content solid-bottom">
					<!-- <view class="mes text-df text-333 text-cut freight-text" v-if="goodsInfo.freight_price">￥{{ goodsInfo.freight_price }}</view> -->
					<view class="mes text-sm text-333 text-cut freight-text">{{i18n['运费说明']}}</view>
					<view class="icon"><text class="cuIcon-right text-999 cuIcon-right text-999 margin-left-xs"
							style="font-size: 24rpx"></text></view>
				</view>
			</view>
			<!-- 优惠end -->

			<!-- 排行榜展示区 -->
			<!-- <view class="margin-top-10 bg-white radius-20 padding-lr">
				<view class="list-item" v-if="sale_top_name" @click="goRank">
				  <view class="title title-top">
					<text class="fu-iconfont text-top">&#xe74b;</text>
					排行榜
				  </view>
				  <view class="content solid-bottom">
					<view class="mes text-df text-333 text-cut">{{ sale_top_name }}</view>
					<view class="icon"><text class="cuIcon-right text-999" style="font-size: 16rpx;"></text></view>
				  </view>
				</view>
			  </view> -->
		</view>
		<!-- 评价展示区start -->
		<view id="evaluates" class="evaluates margin-top-10 bg-white padding-lr">
			<view class="title flex justify-between align-center">
				<text class="title-color">
					<text class="text-lg text-333 text-bold">{{i18n['商品评价']}}</text>
					<text class="text-333 text-lg margin-left-xs text-bold">({{ comment_total }})</text>
				</text>
				<text @tap="navToComment">
					<text class="text-sm text-333"
						v-if="goodsInfo.praise_rate || goodsInfo.praise_rate == 0">{{ i18n['好评率']}}{{ goodsInfo.praise_rate + '%' }}</text>
					<text class="text-sm text-999" v-else>{{i18n['查看全部']}}</text>
					<text class="cuIcon-right text-999 margin-left-xs" style="font-size: 24rpx"></text>
				</text>
			</view>
			<view class="content" v-if="comment.length > 0">
				<block v-for="(item, index) in comment" :key="index">
					<fu-evaluate :prop="item"></fu-evaluate>
				</block>
			</view>
		</view>
		<!-- 评价展示区end -->
		<!-- 问答展示区 -->
		<!-- <view id="evaluates" class="evaluates margin-top-10 bg-white padding-lr questionAnswers-list" @tap="navToQuestionsAnswers">
      <view class="title flex justify-between align-center">
        <text class="title-color">
          <text class="text-lg text-333 text-bold">{{i18n['问答']}}</text>
          <text class="text-333 text-lg margin-left-xs text-bold">({{ question_total }})</text>
        </text>
        <text>
          <text class="text-sm text-333">{{i18n['查看全部']}}</text>
          <text class="cuIcon-right text-999 margin-left-xs" style="font-size: 24rpx"></text>
        </text>
      </view> -->
		<!-- <view class="content">
        <block v-for="(item, index) in question_list" :key="index">
          <view class="flex justify-between align-center questionAnswers">
            <view class="questionAnswers-left text-cut flex align-center">
              <image class="image" src="../../static/questions.png" lazy-load="true" />
              <text>{{ item.question_content }}</text>
            </view>
            <view class="questionAnswers-right">{{ item.answer_number }}个回答</view>
          </view>
        </block>
      </view> -->
		<!-- <view class="content">
				<block v-for="(item, index) in question_list" :key="index">
					<view class="flex justify-between  align-center questionAnswers">
						<view class="questionAnswers-left text-cut">
							<image class="image" src="../../static/questions.png" lazy-load="true" />
							<text>
								{{item.question_content}}
							</text>
						</view>
						<view class="questionAnswers-right">
							{{item.answer_number}}{{i18n['个回答']}}
						</view>
					</view>
				</block>
			</view>
    </view> -->
		<!-- 问答 end -->
		<!-- 商品详情start -->
		<view id="details" class="details  bg-white margin-top-10">
			<view class="padding-lr">
				<view class="title flex justify-between align-center">
					<text class="title-color"><text class="text-lg text-333 text-bold">{{i18n['商品详情']}}</text></text>
				</view>
			</view>
			<view class="word-break-all" style="overflow: hidden;">
				<jyf-parser :html="body"></jyf-parser>
			</view>
		</view>
		<!-- 商品详情end -->
		<!-- 底部菜单start -->
		<view class="tools">
			<view class="toolbar">
				<view class="left">
					<view class="left-item" @tap="navToServer">
						<image class="block-32" :src="imgWechatUrl+'/goods/007.png'" mode="aspectFit"></image>
						<text class="margin-top-xs">{{i18n['客服']}}</text>
					</view>
					<view class="left-item" @tap="navToCart">
						<image class="block-32" :src="imgWechatUrl+'/goods/008.png'" mode="aspectFit"></image>
						<text class="margin-top-xs">{{i18n['购物车']}}</text>
						<text v-if="parseInt(cartNumber) > 0" class="tag">{{ cartNumber }}</text>
					</view>
					<!-- <view class="left-item" @tap="openPopup('share')">
            <image class="block-32" src="../../static/006.png" mode="aspectFit"></image>
            <text class="margin-top-xs">{{i18n['分享']}}</text>
          </view> -->
				</view>
				<view class="right">
					<view class="btn btn1" @tap="openPopup('specs', 'cart')" v-if="goodsInfo.is_vip == 0 && goodsInfo.is_backfill == 0"><text
							class="text-lg">{{i18n['加入购物车']}}</text></view>
					<view v-else style="width: 240rpx;"></view>
					<view class="btn btn2" @tap="openPopup('specs', 'buy')"><text
							class="text-lg">{{i18n['立即购买']}}</text></view>
				</view>
			</view>
		</view>
		<!-- 底部菜单end -->
		<!-- 优惠券弹窗-->
		<fu-coupon ref="coupon" :info="coupon_list" @changeInfo="changeInfo"></fu-coupon>
		<!-- 地址弹窗 -->
		<fu-goods-address ref="address" :addrs="addrs" @change="changeAddress"></fu-goods-address>
		<!-- 分享弹窗 -->
		<fu-share ref="share" :info="shareInfo" @getPosterInfo="getShareCode"></fu-share>
		<!-- 运费说明弹窗 -->
		<fu-explain :info="freight_explain" :title="i18n['运费说明']" ref="explain"></fu-explain>
		<!-- 规格弹窗 -->
		<fu-specs-popup ref="specs" :speclist="spec_list" :skulist="sku_list" :currentId="sku_id" :info="goodsInfo"
			:limit="limit" @changeNumber="setNumber" @changeSpec="setSpec" @addCart="addCart" @buyNow="buyNow">
		</fu-specs-popup>
		<fu-notwork></fu-notwork>
	</view>
</template>

<script>
	import richText from '@/common/utils/richText.js';
	import {
		SHAREURL
	} from '@/common/config.js';
	import fuSpecsPopup from '../../components/fu-specs-popup/index.vue';
	import fuCoupon from '../../components/fu-coupon/index.vue';
	import fuExplain from '../../components/fu-explain/index.vue';
	import fuGoodsAddress from '../../components/fu-goods-address/index.vue';
	import fuEvaluate from '../../components/fu-evaluate/fu-evaluate.vue';
	export default {
		components: {
			fuSpecsPopup,
			fuCoupon,
			fuExplain,
			fuGoodsAddress,
			fuEvaluate
		},
		data() {
			return {
				curSwiper: 1, // 当前轮播图index
				tabs: [{
						title: global.i18n['商品'],
						id: 'banners',
						top: ''
					},
					{
						title: global.i18n['评论'],
						id: 'evaluates',
						top: ''
					},
					{
						title: global.i18n['详情'],
						id: 'details',
						top: ''
					}
				],
				StatusBar: this.StatusBar,
				imgWechatUrl: this.imgWechatUrl,
				CustomBar: this.CustomBar,
				curTab: 'banners',
				scrollTop: 0, // {Number} 滚动高度
				opacity: 0, //  {Number} 头部透明度
				swipers: [], // {Array.Object} 轮播图
				goodsInfo: {}, // {Object}商品信息
				shop_price: '', //商品价格
				market_price: '', //市场价格
				spec_list: [], // {Array.Object}规格列表
				sku_list: [], // {Array.Object}规格参照列表
				sku_id: 0, // {String}当前规格id
				sku_name: '', //{String}当前规格名称
				goods_id: 0, //{Number}商品id
				cid: '', // {Number}分类id
				body: '', // {String}商品介绍
				comment: [], //{Array.Object}评论列表
				comment_total: 0, //{Number}评论条数
				question_list: [], // 问答列表
				question_total: 0, // 问答条数
				limit: 0, // {Number}限购数量
				addrs: [], // {Array.Object}地址列表
				curAddr: null, //{String}当前选择的地址
				shareCode: '', //{String}分享的图片路径
				shareUrl: '', //{String}分享的地址路径
				coupon_list: [], //{Array.Object}优惠券列表
				isPlay: false, //{Boolean}是否播放
				videoContext: null, //{Object}视频对象
				freight_explain: '', //{String} 运费说明
				explain_title: '', //{String}运费说明标题
				sale_top_name: '', //排行榜
				is_showTop: false, //是否是从支付成功通知的
			};
		},
		filters: {
			filterMobile(val) {
				if (!val) return '';
				return val.substr(0, 3) + '****' + val.substr(-4);
			}
		},
		computed: {
			shareInfo() {
				return {
					goods_id: this.goods_id,
					sku_id: this.sku_id,
					goodsName: this.goodsInfo.name,
					goodsImage: this.swipers[0],
					thumb: this.goodsInfo.thumb,
					summary: this.goodsInfo.description,
					price: this.goodsInfo.price,
					market_price: this.goodsInfo.market_price,
					avatar: (global.userInfo && global.userInfo.head_img) || '',
					name: (global.userInfo && global.userInfo.user_nickname) || '',
					href: this.shareUrl || SHAREURL +
						`?goods_id=${this.goods_id}&sku_id=${this.sku_id || 0}&activity_id=${this.activity_id || 0}&type=share`, // H5地址
					code: this.shareCode // 二维码
				};
			},
			cartNumber() {
				return this.$store.getters.allNum;
			}
		},
		onReady: function(res) {
			this.videoContext = uni.createVideoContext('myVideo');
		},
		onLoad(options) {
			const {
				goods_id,
				sku_id = 0,
				scene,
				type
			} = options;
			if (scene) {
				const params = decodeURIComponent(options.scene);
				params.split('&').forEach((item, index) => {
					switch (index) {
						case 0:
							id = item.split('=')[1];
							break;
						case 1:
							activity_id = item.split('=')[1];
							break;
						case 2:
							sku_id = item.split('=')[1];
							break;
						case 3:
							invite_code = item.split('=')[1];
							break;
					}
				});
				type = 'share';
			}
			this.goods_id = goods_id;
			this.sku_id = sku_id;
			if (type) {
				this.openModel = 'share';
			}
			if (global.token) {
				this.loadAddress();
			}
			uni.$on('refreshAddress', addr_id => {
				this.loadAddress();
			});
			// 监听页面更新
			uni.$on('paySuccess', data => {
				this.loadData(false);
				this.is_showTop = true
			});
			this.headHeight = Math.round(this.CustomBar + uni.upx2px(88 + 20));
			this.loadData(false);
		},

		onUnload() {
			uni.$off('refreshAddress')
			uni.$off('paySuccess')
			this.clearPolling();
		},
		filters: {
			filterPrice(price) {
				return parseFloat(price);
			}
		},
		onShow() {
			// this.loadData(false);
		},
		onHide() {
			this.clearPolling();
		},
		onPageScroll(e) {
			let top = Math.round(e.scrollTop);
			let tab1 = Math.round(this.tabs[1].top);
			let tab2 = Math.round(this.tabs[2].top);
			let CustomBar = Math.round(this.CustomBar);
			let navH = 115 + this.StatusBar;
			this.scrollTop = top;
			this.opacity = (top / CustomBar).toFixed(2);
			if (top >= 0 && top < tab1 - navH) {
				this.curTab = 'banners';
			} else if (top >= tab1 - navH && top < tab2 - navH) {
				this.curTab = 'evaluates';
			} else if (top >= tab2 - navH) {
				this.curTab = 'details';
			}
		},
		onShareAppMessage() {
			return {
				title: this.goodsInfo.name,
				path: `/pages/goods/goodsdetail/goods-detail/index?goods_id=${this.goods_id}&sku_id=${this.sku_id}&type=share`,
				imageUrl: this.goodsInfo.thumb
			};
		},
		methods: {
			/**
			 * @event
			 * @description  改变优惠券领取状态
			 * @param {Number} val - 是否领取
			 * @return {Boolean}
			 * */
			changeInfo(val) {
				this.coupon_list[val].is_receive = 1;
			},
			navToQuestionsAnswers() {
				this.$util.actionAuth(() => {
					this.$urouter.navigateTo({
						url: '/pages/goods/ask-answer/ask-answer-list/index',
						params: {
							goods_id: this.goods_id,
							activity_id: this.activity_id || 0
						}
					});
				});
			},
			/**
			 * @event
			 * @description  播放视频监听
			 * */
			playVideo() {
				this.isPlay = true;
				let that = this;
				setTimeout(() => {
					that.videoContext.requestFullScreen(0);
					that.videoContext.play();
				}, 200);
			},
			/**
			 * @event
			 * @description  视频结束监听
			 * */
			videoEnd(e) {
				this.videoContext.exitFullScreen();
				this.isPlay = false;
			},
			/**
			 * @event
			 * @description  视频全屏监听
			 * */
			fullscreenchange(e) {
				console.log(e);
				// 退出全屏时
				if (!e.detail.fullScreen) {
					this.isPlay = false;
					this.videoContext.pause();
				}
			},

			goRank() {
				this.$urouter.navigateTo({
					url: '/pages/rank/product-rank/rank-detail/index',
					params: {
						goods_id: this.goods_id,
						cid: this.cid
					}
				});
			},
			/**
			 * @event
			 * @description  获取跑马灯数据(暂时用不着)
			 * */
			getLamp() {
				this.timer = setInterval(this.polling, 6000);
				clearTimeout(this.outTimer);
			},
			/**
			 * @event
			 * @description  清除跑马灯轮(暂时用不着)
			 * */
			clearPolling() {
				clearInterval(this.timer);
				clearTimeout(this.outTimer);
			},
			polling() {
				this.outTimer = setTimeout(() => {
					this.lampInfo = null;
				}, 3000);
				this.$api
					.post(global.apiUrls.getGoodsLampList, {
						goods_id: this.goods_id
					})
					.then(res => {
						if (res.data.code == 1 && res.data.data) {
							this.lampInfo = res.data.data;
						}
						// console.log('跑马灯数据', res);
					});
			},
			/**
			 * @event
			 * @description  弹出领取优惠券弹窗
			 * */
			switchCoupon() {
				this.$util.actionAuth(() => {
					this.openPopup('coupon');
				});
			},
			/**
			 * @event
			 * @description  点击图片放大
			 * @param {String} item 当前图片url
			 * @param {Array} urls 图片url
			 */
			preview(item, urls) {
				uni.previewImage({
					current: item,
					urls: urls
				});
			},
			// 返回
			back() {
				if (this.openModel == 'share') {
					uni.reLaunch({
						url: '/pages/tab/home/shopindex/index'
					});
				} else {
					uni.navigateBack();
				}
			},
			// 轮播图切换
			changeSwiper(e) {
				this.curSwiper = e.detail.current + 1;
			},
			/**
			 * @event
			 * @description 获取收货地址列表
			 * @return {Array}
			 */
			loadAddress() {
				this.$api.post(global.apiUrls.getUserAddressAddressList).then(res => {
					console.log('地址列表', res);
					if (res.data.code == 1) {
						this.addrs = res.data.data;
					}
				});
			},
			/**
			 * @event
			 * @description tab栏切换
			 * @return {Array}
			 */
			changeTab(item) {
				this.curTab = item.id;
				let nowScrollTop = this.scrollTop;
				uni
					.createSelectorQuery()
					.in(this)
					.select('.' + item.id)
					.boundingClientRect(pos => {
						let posTop = Math.round(pos.top);
						if (posTop == 0 && nowScrollTop != 0) return;
						uni.pageScrollTo({
							duration: 0,
							scrollTop: posTop + nowScrollTop - 105 - this.StatusBar
						});
					})
					.exec();
			},
			/**
			 * @event
			 * @description  点击打开弹窗
			 * @param {String} type
			 * @param {Array} param
			 */
			openPopup(type, param) {
				this.$refs[type].open(param);
			},
			/**
			 * @event
			 * @description  获取商品详情
			 * @param {String} goods_id 商品id
			 * @param {Array} user_id 用户id
			 * @return {Object}
			 */
			loadData(isUpdata) {
				this.$api
					.get(global.apiUrls.getGoodsDetail, {
						goods_id: this.goods_id,
						user_id: (global.userInfo && global.userInfo.id) || 0
					})
					.then(res => {
						if (res.data.code == 1) {
							console.log('goods detail', res.data.data);
							let data = res.data.data;
							if (!isUpdata) {
								this.swipers = data.images;
								this.goodsInfo = {
									name: data.name,
									price: data.shop_price,
									market_price: data.market_price,
									discounts: data.discounts || 0.0,
									thumb: data.thumb,
									description: data.description,
									is_collect: data.is_collect,
									share_award_money: data.share_award_money || 0.0,
									number: 1,
									stock: data.stock || 0,
									totalStock: data.stock || 0,
									sales_sum: data.sales_sum,
									is_spec: data.is_spec,
									goods_label: data.goods_label,
									goods_label_activity: data.goods_label_activity,
									goods_label_service: data.goods_label_service,
									praise_rate: data.praise_rate,
									is_shipping: data.is_shipping,
									member_price: data.member_price,
									shop_price: data.shop_price,
									is_vip: data.is_vip
								};
								if (data.freight_explain) {
									this.freight_explain = data.freight_explain.replace(/\n/g, '<br/>');
								}
								this.shop_price = data.shop_price;
								this.market_price = data.market_price;
								this.explain_title = data.freight_name;
								this.coupon_list = data.coupon_list || [];
								this.cid = data.cid;
								this.sale_top_name = data.sale_top_name;
								this.totalStock = data.stock;
								this.limit = data.limit || 0;
								this.body = richText.format(data.body);
								this.comment = data.comment || [];
								this.comment_total = data.comment_total || 0;
								this.question_total = data.question_total || 0;
								this.question_list = data.question_list;
								if (data.is_spec == 1) {
									this.spec_list = data.spec_list.filter(item => item.spec_value.length != 0);
									this.sku_list = Object.values(data.sku_list).map(item => {
										item.sku_spec = item.key.split('_');
										return item;
									});
								}
								uni.stopPullDownRefresh();
								this.$nextTick(() => {
									if (data.is_spec == 1) {
										setTimeout(() => {
											this.$refs.specs.init();
										}, 100);
									}
								});
								if (!this.is_showTop) {
									setTimeout(() => {
										this.computedPosTop();
									}, 500);
								}

							}
							// onshow时只更新评论与问答
							if (isUpdata) {
								console.log('我需要更新了');
								this.comment = data.comment || [];
								this.comment_total = data.comment_total || 0;
								this.question_total = data.question_total || 0;
								this.question_list = data.question_list;
								this.coupon_list = data.coupon_list;
								this.goodsInfo.is_collect = data.is_collect;
								this.$store.dispatch('getCartList');
							}
						} else {
							uni.navigateBack();
							setTimeout(() => {
								this.$message.info(this.i18n['获取详情失败']);
							}, 300);
						}
					});
			},
			/**
			 * @event
			 * @description  计算锚点位置
			 */
			computedPosTop() {
				const query = uni.createSelectorQuery().in(this);
				this.tabs.forEach((item, index) => {
					query
						.select('#' + item.id)
						.boundingClientRect(data => {
							this.$set(this.tabs[index], 'top', data.top);
						})
						.exec();
				});
			},
			/**
			 * @event
			 * @description  收藏
			 * @param {String} collect_id 商品id
			 * @param {Array} sku_id 规格id
			 * @param {Array} collect_title 商品名称
			 * @param {Array} type 类型
			 * @return {Object}
			 */
			collect() {
				this.$util.actionAuth(() => {
					this.$api
						.post(global.apiUrls.postGoodsCollection, {
							collect_id: this.goods_id,
							sku_id: this.sku_id,
							collect_title: this.goodsInfo.name,
							type: 1
						})
						.then(res => {
							if (res.data.code == 1) {
								console.log('collect', res.data);
								if (this.goodsInfo.is_collect) {
									this.goodsInfo.is_collect = 0;
								} else {
									this.goodsInfo.is_collect = 1;
								}
								this.$message.info(res.data.msg);
							}
						});
				});
			},
			/**
			 * @event
			 * @description  修改购买数量
			 * @return {String}
			 */
			setNumber(num) {
				this.goodsInfo.number = num;
			},
			/**
			 * @event
			 * @description  修改购买规格
			 * @param {Object} skuInfo
			 * @return {Object}
			 */
			setSpec(skuInfo) {
				const {
					key_name,
					shop_price,
					market_price,
					sku_id,
					stock,
					member_price,
					thumb
				} = skuInfo;
				console.log('skuInfo', skuInfo);
				this.sku_id = sku_id;
				this.sku_name = key_name;
				this.goodsInfo.price = shop_price;
				this.goodsInfo.market_price = market_price;
				this.goodsInfo.member_price = member_price;
				this.goodsInfo.stock = stock;
				thumb && (this.goodsInfo.thumb = thumb);
				this.goodsInfo.shop_price = shop_price;
			},
			/**
			 * @event
			 * @description  立即购买
			 * @param {Number} goods_id 商品id
			 * @param {String} number 商品数量
			 * @param {String} type 类型
			 */
			buyNow() {
				this.$util.actionAuth(() => {
					if (this.goodsInfo.stock == 0) return this.$message.info(this.i18n['该商品暂无库存']);
					let data = {
						type: 'buy',
						goods_id: this.goods_id,
						number: this.goodsInfo.number
					};
					if (this.sku_id) {
						data.sku_id = this.sku_id;
					}
					if (this.curAddr) {
						data.address_id = this.curAddr.address_id;
					}
					this.$urouter.navigateTo({
						url: '/pages/order/order-process/confirm-order/index',
						params: data
					});
				});
			},
			/**
			 * @event
			 * @description  加入购物车
			 * @param {Number} goods_id 商品id
			 * @param {Number} num 商品数量
			 * @return {Object}
			 */
			addCart() {
				this.$util.actionAuth(() => {
					const data = {
						num: this.goodsInfo.number,
						goods_id: this.goods_id
					};
					if (this.sku_id) {
						data.sku_id = this.sku_id;
					}
					this.$api.post(global.apiUrls.postGoodsAddToCart, data).then(res => {
						if (res.data.code == 1) {
							this.$message.info(this.i18n['加入购物车成功']);
							this.$store.dispatch('getCartList');
							uni.$emit('updateCart');
						} else {
							this.$message.info(res.data.msg);
						}
					});
				});
			},
			/**
			 * @event
			 * @description  选择地址
			 */
			switchAddress() {
				this.$util.actionAuth(() => {
					this.openPopup('address');
				});
			},
			/**
			 * @event
			 * @description  打开运费弹窗
			 */
			switchFreight() {
				this.openPopup('explain');
			},
			/**
			 * @event
			 * @description  去评价列表
			 * @param {Number} goods_id 商品id
			 */
			navToComment() {
				if (this.comment_total == 0) return this.$message.info(this.i18n['该商品暂无评论']);
				this.$urouter.navigateTo({
					url: '/pages/goods/goodsdetail/goods-comment/index',
					params: {
						goods_id: this.goods_id
					}
				});
			},
			/**
			 * @event
			 * @description  改变收货地址
			 */
			changeAddress(e) {
				this.curAddr = e;
				this.$refs.address.close();
			},
			/**
			 * @event
			 * @description 去购物车
			 */
			navToCart() {
				this.$urouter.switchTab('/pages/tab/cart/cart-page/index');
			},
			/**
			 * @event
			 * @description  客服
			 */
			navToServer() {
				this.$urouter.navigateTo('/pages/index/contactUs/index')
				return
				// 基础版本不需要此客服，暂时屏蔽
				this.$util.actionAuth(() => {
					this.$urouter.navigateTo({
						url: '/pages/service-message/service/service-detail/index',
						params: {
							kid: '47',
							goods_id: this.goods_id,
							activity_id: this.activity_id || 0
						}
					});
				});
			},
			/**
			 * @event
			 * @description  获取二维码
			 * @param {Number} goods_id 商品id
			 * @param {Number} activity_id 活动id
			 * @param {Number} sku_id 规格id
			 */
			getShareCode() {
				// #ifdef MP-WEIXIN
				let data = {
					a: this.goods_id,
					b: this.activity_id || 0,
					c: this.sku_id || 0
				};
				console.log('我分享的参数', data);
				let dataStr = this.$util.serialize(data);
				let page = 'pages/goods/goodsdetail/goods-detail/index';
				this.$api
					.post(global.apiUrls.postShareCode, {
						page: page,
						scene: dataStr,
						width: 180
					})
					.then(res => {
						console.log('分享二维码', res);
						if (res.data.code == 1) {
							let data = res.data.data.base64;
							this.$util
								.base64ToPath(data)
								.then(res => {
									console.log('图片临时路径', res);
									this.shareCode = res;
									this.$refs.share.init();
								})
								.catch(err => {
									console.log('保存临时二维码失败', err);
									this.$message.info(this.i18n['保存临时二维码失败']);
								});
						} else {
							this.$message.info(this.i18n['获取分享二维码失败']);
						}
					})
					.catch(err => {
						console.log('获取分享二维码失败', err);
					});
				// #endif
				// #ifndef MP-WEIXIN
				this.$api
					.post(global.apiUrls.postAppShareCode, {
						goods_id: this.goods_id,
						activity_id: this.activity_id || 0,
						sku_id: this.sku_id || 0
					})
					.then(res => {
						let data = res.data;
						console.log('App fen xiang ', data);
						if (data.code == 1) {
							let url = data.data.qrcode_url;
							let href = data.data.url;
							console.log('二维码路径', url);
							this.shareCode = url;
							this.shareUrl = href;
							this.$refs.share.init();
						} else {
							this.$message.info(this.i18n['获取分享二维码失败']);
						}
					})
					.catch(err => {
						console.log(err);
					});
				// #endif
			}
		},
		onPullDownRefresh() {
			this.loadData(false);
			this.$refs.guess && this.$refs.guess.refresh();

			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom(e) {
			this.$refs.guess && this.$refs.guess.loadData();
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100%;
		margin-bottom: 100rpx;
		padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
	}

	.banners {
		height: 750rpx;
		position: relative;

		.carousel {
			width: 100%;
			height: 100%;

			.image {
				width: 100%;
				height: 100%;
			}

			image {
				width: 100%;
				height: 100%;
			}
		}

		.pagination {
			width: 80rpx;
			height: 40rpx;
			border-radius: 40rpx;
			background-color: rgba(0, 0, 0, 0.5);
			position: absolute;
			right: 32rpx;
			bottom: 32rpx;
			line-height: 40rpx;
			font-size: 28rpx;
			text-align: center;
			color: rgba(255, 255, 255, 0.8);
		}
	}

	.video-poster {
		height: 100%;
		position: relative;
		font-size: 40rpx;
		color: #ffffff;

		#myVideo {
			width: 750rpx;
			height: 100%;
		}

		.video-poster-circle {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			border: 1rpx solid #ffffff;
			z-index: 99;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			overflow: hidden;

			.video-poster-mask {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				background: rgba(0, 0, 0, 0.5);
				z-index: -1;
			}
		}
	}

	// #ifdef MP-WEIXIN
	.tabs {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 88rpx;
		background-color: #ffffff;
		box-shadow: 0 6rpx 4rpx rgba(0, 0, 0, 0.06);
		display: flex;
		z-index: 999;

		.tab-item {
			height: 100%;
			line-height: 88rpx;
			font-size: 28rpx;
			color: #999999;
			border-bottom: 4rpx solid white;
		}

		.tab-item.active {
			color: #333333;
			font-size: 32rpx;
			border-bottom-color: $fu-main-color;
		}
	}

	// #endif

	.prices {
		height: 112rpx;
		background-color: #ffffff;

		.box {
			height: 100%;
			/* background: linear-gradient(90deg, #ff154f 0%, #f12228 100%); */
			background: url('') no-repeat left center;
			background-size: 100% 100%;
			padding: 0 32rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;

			.top {
				line-height: 1;
			}

			.bot {
				display: inline-block;
				height: 32rpx;
				font-size: 20rpx;
				line-height: 32rpx;
				border-radius: 8rpx;
				padding: 0 14rpx;
				background-color: #ffffff;
				margin-top: 10rpx;
				color: $fu-main-color;
			}
		}

		.sale-box {
			position: relative;
		}

		.sale-box::before {
			content: '';
			position: absolute;
			width: 2rpx;
			height: 44rpx;
			display: inline-block;
			background: #ffffff;
			opacity: 0.6;
			left: -32rpx;
			top: 50%;
			transform: translateY(-50%);
		}
	}

	.sale-mark {
		padding: 10rpx;
		margin: 0 5rpx;
		height: 32rpx;
		background: rgba(255, 239, 239, 1);
		border-radius: 4px;
		color: #ff6464;
		font-size: 24rpx;
		text-align: center;
		width: 84rpx;
	}

	.infos {
		border-radius: 0;
	}

	.list-item {
		height: 112rpx;
		line-height: 112rpx;
		display: flex;

		.title {
			width: 100rpx;
			min-width: 100rpx;
			font-size: 28rpx;
			color: #333333;
			font-weight: bold;
		}

		.content {
			flex: 1;
			display: flex;
			justify-content: space-between;
			overflow: hidden;

			.mes {
				flex: 1;
				position: relative;
			}

			.icon {
				/* width: 50rpx;
      min-width: 50rpx; */
				display: flex;
				justify-content: flex-end;
				align-items: center;
			}

			.coupon-icon {
				width: 30rpx;
				min-width: 30rpx;
			}

			.freight-text {
				text-align: right;
			}
		}
	}

	.title-color {
		position: relative;
		padding-left: 10rpx;
	}

	.title-color::before {
		display: inline-block;
		position: absolute;
		content: '';
		height: 30rpx;
		width: 6rpx;
		background: $theme;
		left: 20rpx;
		top: 34rpx;
	}

	.evaluates {
		.title {
			height: 100rpx;

			.title-color::before {
				left: -4rpx;
				top: 10rpx;
			}
		}
	}

	.shopinfos {
		.title {
			height: 260rpx;
			background-repeat: no-repeat;
			background-size: cover;
			padding: 30rpx;
			border-radius: 20rpx 20rpx 0 0;

			.tag {
				padding: 5rpx 10rpx;
				font-size: 16rpx;
				background-color: rgba(255, 0, 0, 0.6);
				border-radius: 100rpx;
				color: #ffffff;
			}

			.tag+.tag {
				margin-left: 10rpx;
			}

			.action {
				width: 160rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				border-radius: 60rpx;
				background-color: rgba(0, 0, 255, 0.3);
				color: #ffffff;
				font-size: 24rpx;
			}
		}

		.recommend {
			.wrap {
				width: 100%;

				.list {
					display: flex;
					align-props: flex-start;

					.goods-item+.goods-item {
						margin-left: 20rpx;
					}
				}
			}
		}
	}

	.details {
		.title {
			height: 100rpx;
			font-size: 32rpx;
			color: #333333;
			font-weight: bold;
			line-height: 100rpx;

			.title-color::before {
				left: -4rpx;
				// top: 10rpx;
			}
		}
	}

	.tools {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		background-color: #ffffff;
		/* box-shadow: 0px -1px 0px #eeeeee; */
		z-index: 999;

		.toolbar {
			height: 100rpx;
			display: flex;

			.left {
				flex: 1;
				padding-left: 32rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				width: 272rpx;

				.left-item {
					display: flex;
					flex-direction: column;
					font-size: 24rpx;
					color: #666;
					align-items: center;
					position: relative;

					.tag {
						position: absolute;
						top: -10rpx;
						right: -18rpx;
						background: $bgtheme;
						width: 36rpx;
						height: 36rpx;
						border-radius: 50%;
						font-size: 20rpx;
						color: #ffffff;
						line-height: 36rpx;
						text-align: center;
					}
				}
			}

			.right {
				/* display: flex;
      align-items: center;
      justify-content: space-between;*/
				padding: 0 0 0 30rpx;
				width: calc(100% - 272rpx);

				display: flex;
				align-items: center;
				justify-content: center;

				.btn {
					width: 50%;
					height: 100rpx;
					text-align: center;
					color: #ffffff;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					line-height: 1.3;
				}

				.btn1 {
					background-color: #ffbc64;
				}

				.btn2 {
					background-color: #ff6464;
				}
			}
		}
	}

	.block-30 {
		width: 30rpx;
		height: 28rpx;
	}

	.block-32 {
		width: 42rpx;
		height: 42rpx;
	}

	.radius-20 {
		border-radius: 20rpx;
	}

	.block-90 {
		width: 90rpx;
		height: 90rpx;
		min-width: 90rpx;
		min-height: 90rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.block-220 {
		width: 220rpx;
		height: 220rpx;
		min-width: 220rpx;
		min-height: 220rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.text-through {
		text-decoration: line-through;
	}

	.word-break-all {
		word-break: break-all;
	}

	.text-999 {
		color: #999999;
	}

	.item-goods-label {
		background-image: linear-gradient(to right, #ff9700, #ed1c24);
		padding: 2rpx 5rpx;
		color: #ffffff;
		font-size: 24rpx;
		border-radius: 6rpx;
		margin-right: 9rpx;
	}

	.item-activity-label {
		padding: 2rpx 5rpx;
		/* margin: 5rpx; */
		font-size: 24rpx;
		border-radius: 6rpx;
		border: 1px solid;
		margin: 0rpx 1px 0px;
		display: inline-block;
		transform: scale(0.8);
	}

	.item-goods-service-label {
		padding: 2rpx;
		margin: 3rpx;
		display: inline-block;
	}

	.evaluates-service {
		padding: 10rpx 0;
		color: #999999;
	}

	.service-icon {
		font-size: 24rpx;
		margin-right: 8rpx;
		color: $theme;
		margin-left: 18rpx;
	}

	.item-goods-service-label:first-child .service-icon {
		margin-left: 0rpx;
	}

	.lamp {
		color: #fff;
		font-size: 24rpx;
		position: absolute;
		z-index: 9999;
		top: 150rpx;
		background: rgba(0, 0, 0, 0.6);
		display: flex;
		align-items: center;
		margin: 0 10rpx;
		border-radius: 10rpx;
		padding: 2rpx 20rpx;

		image {
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
			background: #fff;
			margin-right: 10rpx;
		}

		.text {
			margin-right: 10rpx;
		}
	}

	.title-top {
		width: 140rpx !important;

		.text-top {
			margin-right: 10rpx;
			font-size: 24rpx;
		}
	}

	.discounts-info {
		color: $theme;
		font-size: 22rpx;
		border-radius: 6rpx;
		padding: 8rpx 16upx;
		background-image: url($IMG_WECHAT_URL+'/goods/detail_coupon_bg.png');
		background-size: 100% 100%;
		margin-right: 16rpx;
	}

	.discounts-info:first-child {
		margin-left: 0;
	}

	.activity-info {
		color: $theme;
		font-size: 24rpx;
		border-radius: 6rpx;
		padding: 4rpx;
		background: #fce4eb;
	}

	.questionAnswers {
		padding: 10rpx;
	}

	.questionAnswers:last-child {
		padding-bottom: 20rpx;
	}

	.questionAnswers-left {
		font-size: 28rpx;
		color: #333333;
		width: 85%;
		top: 2rpx;
	}

	.questionAnswers-right {
		font-size: 24rpx;
		color: #999999;
	}

	.questionAnswers-list .image {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}

	.share-btn {
		padding-right: 26rpx;
	}

	.share-btn image {
		width: 34rpx;
		height: 34rpx;
	}

	.cuIcon-back {
		font-size: 26rpx;
		color: #000;
	}

	.tabs {
		width: 100%;
		display: flex;
		pointer-events: all;

		.tab-item {
			height: 100%;
			font-size: 28rpx;
			color: #999999;
			border-bottom: 4rpx solid white;
		}

		.tab-item.active {
			color: #333333;
			font-size: 32rpx;
			border-bottom-color: $fu-main-color;
		}
	}

	.margin-top-10 {
		margin-top: 10rpx;
	}

	.address-icon {
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		margin-top: -16rpx;
		top: 50%;
		margin-right: 4rpx;
	}

	.margin-left-province {
		margin-left: 40rpx;
	}

	.collect-icon {
		width: 32rpx;
		height: 32rpx;
	}

	/deep/ .uni-numbox__minus {
		background: #fff;
	}

	/deep/ .uni-numbox__plus {
		background: #fff;
	}

	/deep/ .uni-numbox__value {
		background: #F7F7F7;
	}
</style>
